<%@page import="com.group4.DAO.VideoCommentDAO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="t" tagdir="/WEB-INF/tags"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	com.group4.DAO.VideoDAO video = com.group4.DB.Video
			.getVideoWithURL(request.getParameter("v"));
	session.setAttribute("video", video);
	java.util.List<com.group4.DAO.VideoCommentDAO> comments = com.group4.DB.VideoComment
			.getAllVideosCommentsWithVideoID(video.getID());
	for(com.group4.DAO.VideoCommentDAO comment : comments){
		com.group4.DAO.UserDAO user = com.group4.DB.User.getUserWithID(comment.getCommentOwnerId());
		comment.setCommentOwnerName(user.getUsername());
	}
	session.setAttribute("comments", comments);
%>

<script>
	

		function submitForm(thisObj, thisEvent) {
			var comment = $('#comment').val();
			var name = '<%= session.getAttribute("username") %>';
			var videoId = ${video.ID};

			

			$.getJSON("/Signport/comment/add", {
				text : comment,
				username : name,
				video_id : videoId
			}, function(data) {
				if (data.error != undefined) {
					alert(data.error);
				} else {
					
					$( ".name" ).append( "<div class=\"profile-activity clearfix\"><a href=\"#\">"+data.username+"</a></div><div class=\"text\">"+data.commentText+"</div>" );
					$("#comment").val("");
				}

				$('#return_message').html(data.message);
			});

			return false; // prevents the page from refreshing before JSON is read from server response
		}
	</script>

<t:wrapperLogin title="View Video">

	<div class="page-content">
		<div class="page-header">
			<h1>${video.videoName}</h1>
		</div>

		<div class="row">
			<div class="col-xs-6">
				<object type="application/x-shockwave-flash"
					data="http://flv-player.net/medias/player_flv.swf" width="520"
					height="320">
					<param name="movie"
						value="http://flv-player.net/medias/player_flv.swf" />
					<param name="allowFullScreen" value="true" />
					<param name="FlashVars" value="flv=${param['v']}" />
				</object>

				<form role="form" class="form form-horizontal">
					<div class="form-actions">
						<button type="submit" class="btn btn-default">REPORT</button>
						<button type="submit" class="btn btn-default pull-right">2
							LIKEs</button>
					</div>
				</form>

				<div class="row">
					<div class="col-xs-12 widget-box transparent">
						<div class="widget-header widget-header-small">
							<h4 class="smaller">Comments</h4>
						</div>
						<div class="widget-body">
							<div class="widget-main padding-8">
								<div class="dialogs">
									<div class="itemdiv dialogdiv">
										<div class="user"></div>
										<div class="body">
											<div class="name" id="commentList">
												<c:forEach items="${comments}" var="comment">
													<div class="profile-activity clearfix">
														<a href="#">${comment.commentOwnerName}</a>
													</div>
													<div class="text">${comment.commentText}</div>
												</c:forEach>
											</div>

										</div>
									</div>
									
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-xs-12 widget-box transparent">
						<div class="widget-header widget-header-small">
							<h4 class="smaller">Add Comment</h4>
						</div>
						<div class="widget-body">
							<div class="widget-main padding-8">
								<form role="form" class="form form-horizontal" >
									<div class="form-group">
										<textarea class="autosize-transition form-control" id="comment"
											name="newComment"></textarea>
									</div>
									<div class="clearfix form-actions">
									<!-- <button type="submit" class="btn btn-info">Change</button> -->
									<input type="submit" name="submit" value="Post" class="btn btn-info"
										onclick="return submitForm(this, event);">
								</div>
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-xs-6">
				<h4>Description</h4>
				<p>${video.videoDescription}</p>

				<hr class="hr hr-18 hr-dotted" />
				<h4>Tags</h4>
				<p>${video.videoTag}</p>
				<hr class="hr hr-18 hr-dotted" />
				<h4>Related Videos</h4>
				<div>
					<div class="profile-activity clearfix">
						<a href="video">Related video</a>
						<p>Some tag, another tag</p>
					</div>
					<div class="profile-activity clearfix">
						<a href="video">Another related video</a>
						<p>Hey, this, one, has, tags, as, well</p>
					</div>
					<div class="profile-activity clearfix">
						<a href="video">Yet another related video</a>
						<p>Lorem, ipsum, dolor</p>
					</div>
					<div class="profile-activity clearfix">
						<a href="video">One last related video</a>
						<p>Yeah, this, is, getting, repetitive</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</t:wrapperLogin>

